import { Modal } from 'antd';

import { PRODCTION_NAME } from '@/pages/Renewal';

import styles from './index.less';

interface Props {
  isOrderDetailVisible: boolean;
  setIsOrderDetailVisible: (b: boolean) => void;
  dataDetail: any;
}

const USER_INFO = JSON.parse(localStorage.getItem('USER_INFO') as string);
export default function OrderDetail(props: Props) {
  const { isOrderDetailVisible, setIsOrderDetailVisible, dataDetail } = props;
  return (
    <>
      <Modal
        title="订单详情"
        visible={isOrderDetailVisible}
        onCancel={() => setIsOrderDetailVisible(false)}
        footer={null}
        keyboard
      >
        <div className={styles.orderInfo}>
          <div>订单信息</div>
          <div>订单号：{dataDetail?.orderNo}</div>
          <div>企业全称：{dataDetail?.companyName ?? USER_INFO?.companyName}</div>
          {/*<div>社区编号：{}</div>*/}
          <div>联系电话：{USER_INFO?.mobileNo}</div>
        </div>
        <div className={styles.orderInfo}>
          <div>购买信息</div>
          <div>订购版本：{PRODCTION_NAME + dataDetail?.saasProduct?.name}</div>
          <div>订购时长：{dataDetail?.buyTimes}{dataDetail?.buyTimeUnitDesc}</div>
          <div>有效期至：{!dataDetail?.expireDate ? '付款完成后开始计算' : dataDetail?.expireDate}</div>
          {/*<div>用户数量：{60031}</div>*/}
          <div>产线数量：{dataDetail?.buyedProductionLineNumber}</div>
        </div>
        {
          dataDetail?.saasProduct?.name === '体验版' ? null :
            <div className={styles.orderInfo}>
              <div>支付信息</div>
              <div>支付时间：{dataDetail?.status === 3 ? dataDetail?.payDate : ''}</div>
              <div>付款方式：{dataDetail?.status === 3 ? dataDetail?.paymentMethod === 1 ? '支付宝' : dataDetail?.paymentMethod === 2 ? '微信' : '' : ''}</div>
              {/*<div>付款账号：{13204230631}</div>*/}
              <div style={{ wordBreak: 'break-all' }}>交易流水：{dataDetail?.status === 3 ? dataDetail?.paymentOrderNo : ''}</div>
            </div>
        }
      </Modal>
    </>
  );
}
